<template>
<div class="wd-tc" style="width: 293px;margin-top: 47px;">
    <div class="circle-two">
        <div class="font-box wd-tc">
            <p class="num c-yellow"><ICountUp
                :endVal="parseInt(indexData)"
                :key="Math.random()"
                @ready="onReady"
            /></p>
            <p class="font">条</p>
        </div>
    </div>
    <p style="margin-left: 38px;">数据总量</p>
    <div class="circle-light twinkling"></div>
</div>
</template>
<script>
    import ICountUp from 'vue-countup-v2'
    export default {
        name:'CircleTwo',
        components: {
            ICountUp,
        },
        data() {
            return {
                }
        },
        props:['indexData'],
        methods:{
            onReady(instance, CountUp) {
               // instance.update();
            },
        },
        created(){
        },
    }

</script>
<style lang="less" scoped>
     .wd-tc{
         text-align: center;
         .circle-two{
             width: 306px;
             height: 336px;
             // background-image: url(./img/circle-two.png) ;
             background:url(./img/circle-two.png) no-repeat;
             padding-top: 103px;
             .font-box{
                   width: 260px;
                  margin-left: 34px;
                 .num{
                     font-size: 64px;
                 }
                 .c-yellow{
                       font-size: 36px!important;
                   }
                 .font{
                     font-size: 46px;
                 }
             }

         }
         .circle-light{
             width: 255px;
             height: 73px;
             background-image: url(./img/circle-light.png);
             margin: -17px 37px;
         }
         @-webkit-keyframes twinkling {
             0% {
                 opacity:0.2;
                 filter:alpha(opacity=20);
             }
             50% {
                 opacity:1;
                 filter:alpha(opacity=100);
             }
         }
         .twinkling {
             -webkit-animation:twinkling 2.1s infinite alternate;
             animation:twinkling 2.1s infinite alternate;
             -webkit-animation-fill-mode:both;
             animation-fill-mode:both;
         }
     }

</style>


